<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			#app {
				width: 1000px;
				margin: 0px auto;
				padding: 0px;
				/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
				/* border: 1px ; */
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-row style="margin-top: 10px; height: 80px; padding-top: 15px;">
				<el-col :span="12" style="padding-left: 80px; padding-top: 15px;">
					<h3>添加用户</h3>
				</el-col>
				<el-col :span="12" style="text-align: right; padding-top: 8px; padding-right: 80px; ">
					<el-button type="primary">
						<el-link style="color: white;" target="_self" href="user.html">返回</el-link>
					</el-button>
				</el-col>
			</el-row>
			<hr />
			<el-form ref="form" label-width="180px">
				<el-row>
					<el-col :span="24" style="margin-top: 20px;">
						<el-form-item label="工号:">
							<el-input v-model="form.user.userName" style="width:300px;"></el-input>
						</el-form-item>
						<!-- 跟具自己的修改 可修改为 项目名称 书名 荣誉称号 竞赛名称 专利或软件著作权名称-->
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="24">
						<el-form-item label="姓名:">
							<el-input v-model="form.user.nickName" style="width:300px;"></el-input>
						</el-form-item>
						<!-- 跟具自己的修改 可修改为 项目名称 书名 荣誉称号 竞赛名称 专利或软件著作权名称-->
					</el-col>

					<el-col :span="24">
						<el-form-item label="密码:">
							<el-input v-model="form.user.password"  style="width:300px;"></el-input>
						</el-form-item>
						<!-- 跟具自己的修改 可修改为 项目名称 书名 荣誉称号 竞赛名称 专利或软件著作权名称-->
					</el-col>

					<el-col :span="24">
						<el-form-item label="状态:">
							<el-switch style="display: block;margin-top: 10px;margin-left: 5px;" v-model="zhuangtai"
								active-color="#13ce66" inactive-color="#ff4949" active-text="启用" inactive-text="禁用">
							</el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="角色" prop="value">
							<el-checkbox-group v-model="form.value">
								<el-checkbox v-for="(item,index) in list"  :label="item.id" name="item.id">{{item.name}}
								</el-checkbox>
								<!-- <el-checkbox label="地推活动" name="type"></el-checkbox>
						      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
						      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> -->
							</el-checkbox-group>
						</el-form-item>
					</el-col>
					<el-col :span="24" style="text-align: center;">
						<el-button type="primary" style="margin-bottom: 20px;" @click="insert">保存</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</body>
</html>
<script>
	let vm = new Vue({
		el: "#app",
		data: {
			form: {
				
				value: [],
				user: {
					userName: "",
					nickName: "",
					password: "",
					status: "",
				},
				
					
				
				userrole :[
					
				]
					
			},
			
			list:[],
			zhuangtai: true,
			type: [this.Role1,this.Role2,this.Role3,this .Role4],
            
		},
		created:function(){
			this.load()
			console.log(this.list)
			},
		methods: {
			load(){
				let token = sessionStorage.getItem("token")
				let config = { 
					headers: {
						"token": token
					}
				};
				axios.post('http://localhost:8080/user/userType', this.form, config).then((res) => {
					console.log("-************************")
					console.log(res)
					console.log("-************************")
					console.log(res.data.data)
					this.list=res.data.data
					
					// this.list=res.data.data
					// this.Role1=res.data.data[0].name
					// this.Role2=res.data.data[1].name
					// this.Role3=res.data.data[2].name
					// this.Role4=res.data.data[3].name
					
			})
			},
			show() {
				console.log(this.form.value)
				console.log(this.value2)
				console.log(this.num)
				console.log(this.username)
				console.log(this.password)
			},
			insert() {
				console.log(this.value)
				let token = sessionStorage.getItem("token")
				console.log(this .form.value)
				for(let i=0;i<this.list.length-1;i++){
					
					let n=this.form.value[i]
					let ob={
					roleId:n,
				   }
				  
				this.form.userrole.push(ob)
				
				} console.log(this.form.userrole)
				
				
				let config = {
					headers: {
						"token": token
					}
				};
				   
					if(this.zhuangtai==true){this.form.user.status=0}
					else{this.form.user.status=1}
				axios.post('http://localhost:8080/user/insert', this.form, config).then((res) => {
					console.log(this.form)
					/* this.form.userrole=[]
					this.form.user.nickName=""
					this .form.user.password=""
					this .form.user.userName=""
					this.form.user.status="" */
                   
					
				})

			}
		}
	})
</script>
